<template>
	<div style="display: flex; justify-content: center">
		<el-row :gutter="20" class="user-container">
			<el-col :span="24" class="mb-4">
				<el-card shadow="hover" class="info-card">
					<el-descriptions :column="2" title="个人信息" size="default" border class="custom-descriptions">
						<template #title>
							<div class="description-title">
								<i class="el-icon-user-solid"></i>
								个人信息
							</div>
						</template>

						<el-descriptions-item label="账户名" label-class-name="desc-label" content-class-name="desc-content">
							<el-icon><User /></el-icon>
							{{ userInfo.username }}
						</el-descriptions-item>

						<el-descriptions-item label="昵称" label-class-name="desc-label" content-class-name="desc-content">
							<el-icon><Edit /></el-icon>
							{{ userInfo.nickname }}
						</el-descriptions-item>

						<el-descriptions-item label="当前状态" label-class-name="desc-label" content-class-name="desc-content">
							<el-tag v-if="userInfo.statu === 1" type="success" effect="dark">正常</el-tag>
							<el-tag v-if="userInfo.statu === 2" type="danger" effect="dark">封禁</el-tag>
						</el-descriptions-item>

						<el-descriptions-item label="手机号" label-class-name="desc-label" content-class-name="desc-content">
							<el-icon><Iphone /></el-icon>
							{{ userInfo.phone || '未绑定' }}
						</el-descriptions-item>

						<el-descriptions-item label="邮箱" label-class-name="desc-label" content-class-name="desc-content">
							<el-icon><Message /></el-icon>
							{{ userInfo.email || '未绑定' }}
						</el-descriptions-item>

						<el-descriptions-item label="个人简介" label-class-name="desc-label" content-class-name="desc-content">
							<el-icon><Notebook /></el-icon>
							{{ userInfo.content || '暂无简介' }}
						</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>

			<el-col :span="24">
				<el-card shadow="hover" class="tabs-card">
					<el-tabs v-model="activeName" class="custom-tabs" tab-position="left" @tab-click="handleClick">
						<el-tab-pane label="个人信息" name="first">
							<template #label>
								<span class="tab-label"><i class="el-icon-document"></i> 个人信息</span>
							</template>
							<Info class="pane-content" />
						</el-tab-pane>

						<el-tab-pane label="修改密码" name="second">
							<template #label>
								<span class="tab-label"><i class="el-icon-lock"></i> 修改密码</span>
							</template>
							<RepassWord class="pane-content" />
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import useSystemStore from '@/stores/system'
import pinia from '@/stores/store'
import Info from '@/views/common/information/userInfo.vue'
import RepassWord from '@/views/common/information/repassword.vue'
import { ref } from 'vue'
import { Edit, Iphone, Message, Notebook, User } from '@element-plus/icons-vue'

const systemStore = useSystemStore(pinia)
const userInfo = systemStore.userInfo
const activeName = ref('first')
</script>

<style scoped lang="scss">
.user-container {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 0 40px;
	box-sizing: border-box;

	.info-card,
	.tabs-card {
		margin-bottom: 20px;
		border-radius: 12px;
	}

	.custom-descriptions {
		.description-title {
			font-size: 20px;
			color: var(--el-color-primary);
			display: flex;
			align-items: center;
			i {
				margin-right: 8px;
			}
		}

		:deep(.desc-label) {
			font-weight: 600;
			color: #666;
			width: 120px;
		}

		:deep(.desc-content) {
			color: #333;
			display: flex;
			align-items: center;
			.el-icon {
				margin-right: 8px;
			}
		}
	}

	.custom-tabs {
		.tab-label {
			display: flex;
			align-items: center;
			i {
				margin-right: 8px;
				font-size: 18px;
			}
		}

		.pane-content {
			padding: 20px 30px;
		}
	}
}
</style>
